<template>
 
   
    <!-- 样式动态绑定 -->
    <div>
        <h2 :style="styleObject">vue 样式动态绑定(:style)  </h2>
        <p>用 v-html 渲染: <span v-html="rawHtml"></span></p>
    </div>
    <br/>
    <!-- 属性动态绑定 -->
    <div v-bind="objectOfAttrs">
        <span>vue 属性动态绑定(v-bind) </span>
    </div>

    <br/>

    <!-- 遍历list -->
    <div>
        <p v-if="seen" @click="seen=!seen"> Now you see me</p>
    </div>

    <a v-on:click="doSomething">doSomething </a>

</template>
<script>
export default {

    data() {
        return {
            /* 样式动态绑定 */
            styleObject: {
                color: "red",
                fontSize: "30px"
            },
            objectOfAttrs : {
                id: 'container',
                class: 'wrapper',
                style: 'background-color:green'
            },
            seen: true,
            msg: "Hello, Vue!",
            rawHtml: '<span style="color: red">This should be red.</span>'
        };
    },
    created() {
        const urlParams = new URLSearchParams(window.location.search);
        console.log('this.msg ', urlParams.get('msg'));
        this.msg = urlParams.get('msg') || 'Hello, Vue!'; // 从URL查询参数中获取msg，如果没有找到则使用默认值
        console.log('rawHtml初始化完成');
        this.rawHtml = '<span style="color: red">This should be red.</span>';
    },
    doSomething() {
        console.log('---------doSomething---------');
    },
};
</script>